<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<div class="headerlogobox">LOGO</div>
				<div>
					<el-dropdown>
						<el-button type="primary" class="userimgbtn">
							<img :src="userxingxiObj.headerimg" alt="用户头像">
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="goout">退出登录</el-dropdown-item>
								<!-- 待完成 -->
								<el-dropdown-item @click="goout">修改密码</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<span>欢迎：{{ userxingxiObj.nick }}</span>
				</div>
			</el-header>
			<el-container>
				<el-aside width="150px" default-active="myself">
					<el-menu :default-active="routername" router class="el-menu-vertical-demo" :collapse="isCollapse"
						unique-opened="true">
						<el-menu-item index="/" style="height: 50px;font-size: 20px;"><el-icon>
								<ArrowLeft />
							</el-icon>返回首页</el-menu-item>
						<el-menu-item index="myself"><el-icon>
								<HomeFilled />
							</el-icon>个人主页</el-menu-item>
						<el-menu-item index="rijisuibi"><el-icon>
								<Notebook />
							</el-icon>日记随笔</el-menu-item>
						<el-menu-item index="zuoping"><el-icon>
								<MessageBox />
							</el-icon>作品管理</el-menu-item>
						<el-menu-item index="xiaoxi"><el-icon>
								<Message />
							</el-icon>消息通知</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
// 选中标签
const routername = ref("myself")
// 用户信息
const userxingxiObj = ref({})
//退出登录
const goout = () => {
	ElMessageBox.confirm('提示：退出后需要展示个人内容将要再次登录', '确定要退出吗？', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
		.then(() => {
			localStorage.removeItem('TOKEN');
			localStorage.removeItem('user');
			ElMessage({ type: 'success', message: '退出成功', });
			router.push({ path: '/' })
		})
		.catch(() => { ElMessage({ type: 'info', message: '取消成功', }) })
}
// 获取地址栏参数并选择合适的routername 头像显示
const getUrlGetRoutername = () => {
	routername.value = window.location.href.substr(window.location.href.lastIndexOf("/") + 1)
	userxingxiObj.value = JSON.parse(localStorage.getItem("user"))
}
onMounted(() => {
	getUrlGetRoutername()
})



</script>
<style lang="scss" scoped>
.common-layout {
	height: 100vh;
	width: 100vw;
}

.el-header {
	display: flex;
	justify-content: space-between;
	min-width: 700px;
	height: 50px;
	overflow: hidden;
	line-height: 50px;
	border-bottom: 1px solid #999;

	.headerlogobox {
		line-height: 50px;
		font-size: 25px;
	}

	.userimgbtn {
		margin: 2.5px;
		width: 45px;
		height: 45px;
		border-radius: 50%;

		img {
			width: 45px;
			height: 45px;
			border-radius: 50%;
		}
	}
}

.el-container {
	// height: calc(100% - 50px);
	height: 100%;

	.el-aside {
		height: 100%;

		// height: calc(100% - 50px);
		.el-menu-item {
			overflow: hidden;
			height: 30px;
		}
	}

	.el-main {
		min-width: 550px;
		background: #eee;
	}
}
</style>